Framework-specific HMR in Vite works through dedicated plugins that integrate with the native HMR system: React Fast Refresh preserves component state by separating component definitions from instances, while Vue HMR handles single-file components by updating templates, scripts, and styles independently
Framework-specific Hot Module Replacement (HMR) in Vite builds upon the native HMR system but adds framework-aware update logic that preserves application state. React Fast Refresh and Vue HMR are implemented through dedicated Vite plugins (@vitejs/plugin-react and @vitejs/plugin-vue) that inject transformation logic and runtime handlers. These plugins enable component-level updates that maintain local state, a capability far beyond basic module replacement .
Fast Refresh is a reimplementation of hot reloading with full support from React, unlike older solutions like React Hot Loader that used proxy components . It consists of two main parts: a Babel plugin (react-refresh/babel) and a runtime (react-refresh/runtime), both maintained within the react-refresh package .
The Babel plugin transforms your code at compile time by detecting all components and custom Hooks, then injecting function calls to register components and collect Hook signatures . This transformation creates a registration system that maps components to unique identifiers. At runtime, when a file changes, the HMR system triggers the Fast Refresh runtime, which processes pending updates through React's built-in reconciliation support. React Fiber nodes (component instances) can then be updated with new render functions while preserving existing state .
Function components and Hooks preserve state by default when edited
Class components lose state on edits (only function components supported)
Hooks with dependencies (useEffect, useMemo, useCallback) always re-run during Fast Refresh, ignoring dependency lists to ensure edits reflect
useState and useRef retain values as long as arguments and Hook order don't change
Adding or removing Hooks causes temporary state reset for that component only
Fast Refresh operates differently based on what a file exports. If a file only exports React components, edits only update that file's components. If a file exports non-component values, Fast Refresh re-runs that file and all files importing it. If a file contains both components and non-component exports, or if a changed file is imported by non-React code, Fast Refresh falls back to full reload .
Vue's HMR implementation through @vitejs/plugin-vue takes advantage of Vue's single-file component (SFC) structure to provide even more granular updates. The plugin integrates with Vite's HMR system to handle the three parts of a Vue SFC separately: template, script, and style .
Template changes: Vue's compiler generates a new render function and hot-replaces it while preserving the component instance and all state
Script changes: The plugin attempts to merge new component options with the existing instance; if successful, state is preserved; otherwise, it falls back to reloading the component
Style changes: Follow the standard CSS HMR path—styles are injected/updated without any component reload
Vue 3 introduced improved HMR support through its Composition API and Proxy-based reactivity system. The Composition API makes component logic more modular, allowing HMR to update individual composables without affecting the whole component. When using Vite with Vue 3, HMR is enabled by default through @vitejs/plugin-vue, and no additional configuration is needed .
Both systems achieve component-level HMR but through different mechanisms. React Fast Refresh relies on deep React integration, the Babel plugin for component registration, and runtime reconciliation. Vue HMR leverages Vue's SFC structure to update templates, scripts, and styles independently. React's approach requires more transformation and runtime coordination but works across any React environment. Vue's approach is simpler because the framework's runtime provides better hooks for hot replacement .
Vite's plugin system enables framework detection and specialized HMR handling. The @flight-framework/hmr package demonstrates a cross-framework approach that preserves state across HMR updates through a global state map. It uses dispose hooks to save state before module replacement and accept hooks to restore it afterward, with framework adapters for React, Vue, Svelte, and Solid . This pattern shows how Vite's HMR API enables sophisticated framework-specific implementations while maintaining a consistent underlying architecture.